<template>
  <div class='project-info-container'>
    <el-form :inline="true"
             :model="projecDetailtInfo.project_info"
             label-width="110px"
             disabled
             class="demo-form-inline">

      <el-form-item label="项目名称:"
                    prop="project_name"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.project_name"
                  placeholder="输入项目名称"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.license_number"
                    label="项目许可证:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.license_number"
                  placeholder="输入项目许可证"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.nick_name"
                    label="项目简称:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.nick_name"
                  placeholder="输入项目简称"></el-input>
      </el-form-item>

      <el-form-item v-if="projecDetailtInfo.project_info.address"
                    label="详细地址:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.addressDetail"
                  placeholder="输入详细地址"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.province"
                    label="项目地址:"
                    class="normal-item">
        <LocationSelect :locationData="locationData"></LocationSelect>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.major_type"
                    label="专业类型:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.major_type"
                  placeholder="输入专业类型"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.project_attr.area"
                    label="建筑面积:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.project_attr.area"
                  placeholder="输入所在城市"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.project_attr.building_type"
                    label="建筑类型:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.project_attr.building_type"
                  placeholder="输入建筑类型"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.project_attr.contract_total"
                    label="合同总额(万元):"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.project_attr.contract_total"
                  placeholder="输入合同总额"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.project_attr.assembly_rate"
                    label="装配率(%):"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.project_attr.assembly_rate"
                  placeholder="输入装配率"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.sign_time"
                    label="签订时间:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.sign_time"
                  placeholder="输入签订时间"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.project_attr.application"
                    label="技术应用:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.project_attr.application"
                  placeholder="输入技术应用"></el-input>
      </el-form-item>

      <el-form-item v-if="projecDetailtInfo.project_info.status"
                    label="项目状态:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.status"
                  placeholder="输入项目状态"></el-input>
      </el-form-item>

      <el-form-item v-if="projecDetailtInfo.project_info.lat"
                    label="具体位置:"
                    class="normal-item">
        <el-input class="normal-input"
                  :value="projecDetailtInfo.project_info.lon+'-'+projecDetailtInfo.project_info.lat"
                  placeholder="输入具体位置"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.created_at"
                    label="创建时间:"
                    class="normal-item">
        <el-input class="normal-input"
                  v-model="projecDetailtInfo.project_info.created_at"
                  placeholder="输入创建时间"></el-input>
      </el-form-item>
      <el-form-item v-if="projecDetailtInfo.project_info.lon"
                    label="地图"
                    class="normal-item">
      </el-form-item>
      <el-form-item label="项目效果图">
        <img class="project-img"
             :src="projecDetailtInfo.project_info.img_url"
             alt="">
      </el-form-item>
      <h2>单位信息</h2>
      <el-form-item :label="projecDetailtInfo.company.build.name"
                    v-for="(item, index) in projecDetailtInfo.company.build.data"
                    :key="index"
                    class="normal-item">
        <el-input class="normal-input"
                  :value="item"></el-input>
      </el-form-item>
      <el-form-item :label="projecDetailtInfo.company.construction.name"
                    v-for="(item, index) in projecDetailtInfo.company.construction.data"
                    :key="index"
                    class="normal-item">
        <el-input class="normal-input"
                  :value="item"></el-input>
      </el-form-item>
      <el-form-item :label="projecDetailtInfo.company.design.name"
                    v-for="(item, index) in projecDetailtInfo.company.design.data"
                    :key="index"
                    class="normal-item">
        <el-input class="normal-input"
                  :value="item"></el-input>
      </el-form-item>
      <el-form-item :label="projecDetailtInfo.company.handle.name"
                    v-for="(item, index) in projecDetailtInfo.company.handle.data"
                    :key="index"
                    class="normal-item">
        <el-input class="normal-input"
                  :value="item"></el-input>
      </el-form-item>
      <el-form-item :label="projecDetailtInfo.company.supervisor.name"
                    v-for="(item, index) in projecDetailtInfo.company.supervisor.data"
                    :key="index"
                    class="normal-item">
        <el-input class="normal-input"
                  :value="item"></el-input>
      </el-form-item>
      <el-form-item :label="projecDetailtInfo.company.survey.name"
                    v-for="(item, index) in projecDetailtInfo.company.survey.data"
                    :key="index"
                    class="normal-item">
        <el-input class="normal-input"
                  :value="item"></el-input>
      </el-form-item>
      <h2>人员信息</h2>
      <el-form-item :label="projecDetailtInfo.user.design_leader.name"
                    class="normal-item">
        <el-select multiple
                   class="normal-input"
                   v-model="projecDetailtInfo.user.design_leader.data">
        </el-select>
      </el-form-item>
      <el-form-item :label="projecDetailtInfo.user.quality_leader.name"
                    class="normal-item">
        <el-select multiple
                   class="normal-input"
                   v-model="projecDetailtInfo.user.quality_leader.data">
        </el-select>
      </el-form-item>
      <el-form-item :label="projecDetailtInfo.user.design_leader.name"
                    class="normal-item">
        <el-select multiple
                   class="normal-input"
                   v-model="projecDetailtInfo.user.design_leader.data">
        </el-select>
      </el-form-item>
      <el-form-item :label="projecDetailtInfo.user.product_leader.name"
                    class="normal-item">
        <el-select multiple
                   class="normal-input"
                   v-model="projecDetailtInfo.user.product_leader.data">
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { ProjectListApi } from '@/services/ProjectCenter'
import LocationSelect from '@/components/LocationSelect/LocationSelect'
export default {
  data () {
    return {
      projecDetailtInfo: {
        user: [],
        company: [],
        project_info: {
          project_attr: {}
        }

      },
      projectId: 21,
      locationData: {

      }
    }
  },
  props: {
    id (newval, oldval) {
      this.projectId = newval
    }
  },
  components: {
    LocationSelect
  },
  methods: {
    // 获取项目基本信息
    getProjectDetailInfo () {
      ProjectListApi.getProjectDetailInfo({
        data: {
          id: this.projectId
        }
      }).then(res => {
        console.log(res, 'get project detail')
        if (res.code === 0) {
          this.projecDetailtInfo = res.data
          this.projecDetailtInfo.project_info.addressDetail = this.projecDetailtInfo.project_info.province +
            this.projecDetailtInfo.project_info.city +
            this.projecDetailtInfo.project_info.area +
            this.projecDetailtInfo.project_info.address

          this.locationData = {
            province: this.projecDetailtInfo.project_info.province,
            province_no: this.projecDetailtInfo.project_info.province_no,
            city: this.projecDetailtInfo.project_info.city,
            city_no: this.projecDetailtInfo.project_info.city_no,
            area: this.projecDetailtInfo.project_info.area,
            area_no: this.projecDetailtInfo.project_info.area_no
          }
        }
      })
    }
  },
  created () {
    this.getProjectDetailInfo()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.project-info-container {
  .project-img {
    width: 178px;
    height: 178px;
    border: 1px dashed #d9d9d9;
  }
  h2 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
}
</style>
